<template>
  <div class="page-gird-container">
    <DescriptionList title="资源池接口">
      <Description term="接口地址：">{{ data.gatewayUrl }}</Description>
      <Description term="接口密钥：">
        {{ data.secret }}
        <Button type="primary" @click="displayKey = true">显示密钥</Button>
      </Description>
    </DescriptionList>
    <!-- <div style="margin-bottom: 24px">回调地址：{{ data.notifyUrl }}</div> -->
    <DescriptionList style="margin-bottom: 10px;">
      <Description term="回调地址：">{{ data.notifyUrl }}</Description>
      <Description term="keyId：">{{ data.keyId }}</Description>
    </DescriptionList>
    <div style="margin-bottom: 20px">授权IP地址：{{ data.whiteList }}</div>
    <Button type="primary" @click="edit = true">编辑</Button>
  </div>
  <Modal v-model="displayKey" title="操作提示" @on-ok="ok">
    <p style="margin-bottom: 20px; color: #000; font-size: 16px">
      请输入账号登陆密码
    </p>
    管理员密码：<Input v-model="paw" style="width: 200px"></Input>
  </Modal>
  <Modal v-model="edit" title="编辑" :footer-hide="true">
    <Form
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="82"
      label-position="right"
      ref="formValidate"
    >
      <FormItem label="接口地址：">
        <Input
          v-model="data.gatewayUrl"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="回调地址：">
        <Input v-model="data.notifyUrl"></Input>
      </FormItem>
      <FormItem label="接口密钥：">
        <Input v-model="formValidate.secret"></Input>
        <div style="color: #a3a3a3">
          接口密钥必须为32位英文字母、数字组成，留空则不修改。
        </div>
        <Button @click="createKey">生成密钥</Button>
      </FormItem>
      <FormItem label="授权IP：">
        <Input v-model="data.whiteList" type="textarea"></Input>
        <div style="color: #a3a3a3">多个IP用英文逗号","拼接</div>
      </FormItem>
      <FormItem label="手机号码：">
        <Input
          v-model="formValidate.mobile"
          :border="false"
          :readonly="true"
        ></Input>
      </FormItem>
      <FormItem label="验证码：" prop="sms_captcha">
        <Input
          v-model="formValidate.sms_captcha"
          style="width: 150px; margin-right: 10px"
        ></Input>
        <span v-show="show" @click="sms_captcha" style="cursor: pointer"
          >获取验证码</span
        >
        <span v-show="!show" class="count">{{ count }}s后重新获取</span>
      </FormItem>
      <Button @click="editOk" type="primary" style="margin-left: 82px;"
        >确认修改</Button
      >
      <Button style="margin-left: 10px" @click="edit = false">取消</Button>
    </Form>
  </Modal>
</template>

<script>
    import {
        memberApiKey,
        memberApiSecret,
        memberSmsCaptcha,
        memberUpdateKey,
    } from "@/api/api";
    import cookies from "@/libs/util.cookies";

    export default {
        name: "api-poolInterface",
        data() {
            return {
                data: {},
                displayKey: false,
                show: true,
                count: "",
                timer: null,
                edit: false,
                paw: "",
                formValidate: {
                    mobile: "",
                    notifyUrl: "",
                    secret: "",
                    whiteList: "",
                    sms_captcha: "",
                },
                ruleValidate: {
                    sms_captcha: [
                        {
                            required: true,
                            message: "请输入验证码",
                            trigger: "blur",
                        },
                    ],
                },
            };
        },
        methods: {
            ok() {
                memberApiSecret({
                    keyId: this.data.keyId,
                    password: this.paw,
                }).then((res) => {
                    this.data.secret = res.secret;
                });
            },
            createKey() {
                let len = 32;
                let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
                let maxPos = $chars.length;
                let pwd = "";
                for (let i = 0; i < len; i++) {
                    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
                }
                this.formValidate.secret = pwd;
            },
            sms_captcha() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    memberSmsCaptcha().then();
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }
            },
            editOk() {
                this.$refs["formValidate"].validate((valid) => {
                    if (valid) {
                        memberUpdateKey(
                            { keyId: this.data.keyId },
                            {
                                sms_captcha: this.formValidate.sms_captcha,
                                notifyUrl: this.data.notifyUrl,
                                secret: this.formValidate.secret,
                                whiteList: this.data.whiteList,
                            }
                        ).then(() => {
                            this.getData();
                            this.edit = false;
                        });
                    }
                });
            },
            getData() {
                memberApiKey().then((res) => {
                    this.data = res;
                });
            },
        },
        created() {
            this.getData();
            this.formValidate.mobile = JSON.parse(cookies.get("info")).mobile;
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #fff;
  /deep/ .ivu-description-list-title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    font-size: 16px;
  }
}
</style>
